<template>

  <el-form :model="order" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div>延期管理</div>
    <el-card class="box-card">
      <span>基本信息</span>
      <div class="text item">

        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input v-model="order.orderNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间">
              <el-input :value="getDate(order.addTime)" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="融资经销商">
              <el-input v-model="order.dealerName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汽车总数量">
              <el-input v-model="order.carSumNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="融资总金额(元)">
              <el-input :value="order.mortgageSumMoney | toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.mortgageSumMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已回本金(元)">
              <el-input :value="order.returnCapital | toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnCapital|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label=" 总天数 ">
              <el-input v-model="order.sumDay" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期利率">
              <el-input :value="order.exceedRate | toFixed4" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="初始融资利率">
              <el-input :value="order.mortgageInterestRate| toFixed4" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期天数">
              <el-input v-model="order.overDay" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="未逾期天数">
              <el-input v-model="order.unOverDay" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="逾期费(元)">
              <el-input :value="order.exceed| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.exceed|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label=" 利息(元)">
              <el-input :value="order.interest| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.interest|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已回逾期费(元)">
              <el-input :value="order.returnExceed| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnExceed|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="已回利息(元)">
          <el-input type="textarea" :value="order.returnInterest| toFixed2" disabled></el-input>
          <span class="convertCurrency">{{order.returnInterest|convertCurrency}}</span>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="待回款总金额(元)">
              <el-input :value="order.returnMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.returnMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待回款本金(元)">
              <el-input :value="order.mortgageSumMoney-order.returnCapital| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{order.mortgageSumMoney|convertCurrency}}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>延期融资周期</span>
      </div>

      <el-row>
        
        <el-col :span="12">
          <el-form-item label="初始融资周期" prop="name">
            <el-input v-model="order.description" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
           <el-form-item label="延期融资周期" prop="descriptions">
          <el-select v-model="order.descriptions" placeholder="下拉选择" >
            <el-option v-for="item in delayDurations" :key="item.id" :label='item.description' :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="延期融资利率" prop="delayInterestRate">
            <el-input v-model="order.delayInterestRate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保证金金额(元)" prop="money">
            <el-input v-model="order.money" ></el-input>
            <span class="convertCurrency">{{order.money|convertCurrency}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="延期备注" prop="remark">
            <el-input v-model="order.remark" type='textarea' ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="延期操作人">
            <el-input v-model="order.createrName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label=" 延期操作时间 ">
        <el-input type="textarea" :value="getDate(order.createTime)" disabled></el-input>
      </el-form-item>
    </el-card>
    <el-form-item class='align'>
      <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
      <el-button type="success" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    require,
    prop,
    decimalTwo
  } from '@/utils/rules.js' //表单验证规则
 import agentHttp from '@/utils/agentHttp.js';
 import {timestampToTime} from '@/utils/index.js'
  export default {
    data() {
      return {
        order : {
          descriptions: '',
          interest: '',
          money:'',
          remark:'',
          delayInterestRate:''
        },
        rules: {
          descriptions: [require("初始融资周期")],
          delayInterestRate:[require("延期融资利率")],
          interest: [require("延期融资利率")],
          money: [require("保证金金额(元)")],
          remark: [require("延期备注")],
          
        },
        delayDurations:[],
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            
            const params ={
                      "deposit": this.order.money,
                      "durationId": this.order.descriptions,
                      "interestRate": this.order.delayInterestRate,
                      "mortgageOrderExtendId": this.order.mortgageOrderExtendId,
                      "remark": this.order.remark
                    }
                    console.dir(params)
            agentHttp.postJson(`adminApi/admin/mortgage_order_repayment/delay`,params).then(res=>{
                    this.dialogSendData.dialogFormVisible = false;
                    this.$message.success(res.data||"延期成功");
                      this.$emit('Refresh',null);
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogSendData.dialogFormVisible = false;
      },
      initData(){
        agentHttp.get(`adminApi/admin/mortgage_order_repayment/view/${this.carorderId}`).then(res=>{
            if(res.success){
                this.order = Object.assign({},res.data.order,this.order) ;
                this.delayDurations = res.data.delayDurations ;
            }
        })
      },
      getDate(time){
          return timestampToTime(time)
      }
    },
    props: {
      dialogSendData: {
        type: Object
      },
      carorderId:{
        type:Number
      },
   
    },
    mounted() {
      // console.log(this.dialogSendData)
    
      this.initData() ;
    }
  };

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }

</style>

